import React, { PureComponent } from 'react';
import { renderRoutes } from 'react-router-config';

import {
    NavLink,
    Switch,
    Route
} from 'react-router-dom'

// function AboutHistory(props) {
//     return <h2>企业成立于两千年</h2>
// }

// function AboutCulture(props) {
//     return <h2>创新文化</h2>
// }

// function AboutContact(props) {
//     return <h2>1234567890</h2>
// }

// function AboutJoin(props) {
//     return <h2>投递简历到3037686283@qq.com</h2>
// }

export function AboutHistory(props) {
    return <h2>企业成立于两千年</h2>
}

export function AboutCulture(props) {
    return <h2>创新文化</h2>
}

export function AboutContact(props) {
    return <h2>1234567890</h2>
}

export function AboutJoin(props) {
    return <h2>投递简历到3037686283@qq.com</h2>
}

export default class About extends PureComponent {
    render() {
        return (
            <div>
                <NavLink exact to="/about" activeClassName="about-active">企业历史</NavLink>
                <NavLink exact to="/about/culture" activeClassName="about-active">企业文化</NavLink>
                <NavLink exact to="/about/contact" activeClassName="about-active">联系我们</NavLink>
                <button onClick={e => this.jumpToJoin()}>加入我们</button>

                {/* <Switch>
                    <Route exact path="/about" component={AboutHistory}></Route>
                    <Route path="/about/culture" component={AboutCulture}></Route>
                    <Route path="/about/contact" component={AboutContact}></Route>
                    <Route path="/about/join" component={AboutJoin}></Route>
                </Switch> */}

                {/* 可以打印看一下，就是想要的路由 */}
                {renderRoutes(this.props.route.routes)}
            </div>
        )
    }

    jumpToJoin() {
        // 手动路由跳转
        this.props.history.push('/about/join');
    }
}